<template>
  <div>
    <div>Less变量案例1：普通变量</div>  

    <header><h2>logo</h2></header>
    <footer><h2>footer</h2></footer>

    <div>Less变量案例2：作为选择器和属性名</div>  

    <header><h2>logo</h2></header>
    <div class="width"><h2>footer</h2></div>


    <div>Less变量案例3：作为Url</div>  

    <header class="header3"><h2>logo</h2></header>

    <div>Less变量案例4：Extend</div>  
    <div class="one">第一个盒子</div>
    <div class="two">第二个盒子</div>

  </div>
</template>

<script>
export default {

}
</script>

<style lang="less" scoped>
/*作为普通变量 */
@green:green;
@babel:white;
header,footer{
  &:extend(.inline);
  background:@green;
  h2{
    color:@babel
  }
}
/* 作为选择器和属性名*/
@width:width;
.@{width}{
  @{width}:500px;
  background:@green;
}
@urlImg:"https://free.img.jpg.ink/imgs/2020/11/21/c59141c275a4e.jpeg";
/*作为url */
.header3{
  background:url("@{urlImg}") no-repeat;
  background-size: 100% 100%;
  height: 200px;
  width:200px;
}

.one{
  width:100px;
  height: 100px;
  border:1px solid #000; 
  // &:extend(.two);
}

.two{
  color:red;
  &:extend(.one);
}
</style>